<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/hiprint.css" rel="stylesheet" />
    <link href="css/print-lock.css" rel="stylesheet" />
    <link href="css/hinnn.css" rel="stylesheet" />
    <link href="content/bootstrap.min.css" rel="stylesheet" />
    <script src="plugins/jquery.min.js"></script>
    <script src="content/bootstrap.min.js"></script>
  </head>
  <body>
    <layout
      class="layout hinnn-layout hinnn-layout-has-sider height-100-per"
      style="background: #fff"
    >
      <content
        class="hinnn-layout-content"
        style="border-left: 1px solid #e8e8e8"
      >
        <div class="container-fluid height-100-per print-content">
          <div class="row">
            <div class="col-sm-12">
              <div class="row">
                <div class="col-sm-3 col-md-2" style="padding-right: 0px">
                  <div class="rect-printElement-types hiprintEpContainer">
                    <ul class="hiprint-printElement-type">
                      <li>
                        <span class="title"><code>拖拽列表</code></span>
                        <ul>
                          <li>
                            <a
                              class="ep-draggable-item"
                              tid="testModule.text"
                              style=""
                            >
                              <span
                                class="glyphicon glyphicon-text-width"
                                aria-hidden="true"
                              ></span>
                              <span class="glyphicon-class">文本</span>
                            </a>
                          </li>

                          <li>
                            <a
                              class="ep-draggable-item"
                              tid="testModule.image"
                              style=""
                            >
                              <span
                                class="glyphicon glyphicon-picture"
                                aria-hidden="true"
                              ></span>
                              <span class="glyphicon-class">图片</span>
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <span class="title">辅助</span>
                        <ul>
                          <li>
                            <a
                              class="ep-draggable-item"
                              tid="testModule.hline"
                              style=""
                            >
                              <span
                                class="glyphicon glyphicon-resize-horizontal"
                                aria-hidden="true"
                              ></span>
                              <span class="glyphicon-class">横线</span>
                            </a>
                          </li>
                          <li>
                            <a
                              class="ep-draggable-item"
                              tid="testModule.vline"
                              style=""
                            >
                              <span
                                class="glyphicon glyphicon-resize-vertical"
                                aria-hidden="true"
                              ></span>
                              <span class="glyphicon-class">竖线</span>
                            </a>
                          </li>
                          <li>
                            <a class="ep-draggable-item" tid="testModule.rect">
                              <span
                                class="glyphicon glyphicon-unchecked"
                                aria-hidden="true"
                              ></span>
                              <span class="glyphicon-class">矩形</span>
                            </a>
                          </li>
                          <li>
                            <a class="ep-draggable-item" tid="testModule.oval">
                              <span
                                class="glyphicon glyphicon-record"
                                aria-hidden="true"
                              ></span>
                              <span class="glyphicon-class">椭圆</span>
                            </a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="col-sm-9 col-md-10">
                  <div class="hiprint-toolbar" style="margin-top: 15px">
                    <ul>
                      <li>
                        <a
                          class="hiprint-toolbar-item"
                          onclick="setPaper('A3')"
                        >
                          A3
                        </a>
                      </li>
                      <li>
                        <a
                          class="hiprint-toolbar-item"
                          onclick="setPaper('A4')"
                        >
                          A4
                        </a>
                      </li>
                      <li>
                        <a
                          class="hiprint-toolbar-item"
                          onclick="setPaper('A5')"
                        >
                          A5
                        </a>
                      </li>
                      <li>
                        <a
                          class="hiprint-toolbar-item"
                          onclick="setPaper('B3')"
                        >
                          B3
                        </a>
                      </li>
                      <li>
                        <a
                          class="hiprint-toolbar-item"
                          onclick="setPaper('B4')"
                        >
                          B4
                        </a>
                      </li>
                      <li>
                        <a
                          class="hiprint-toolbar-item"
                          onclick="setPaper('B5')"
                        >
                          B5
                        </a>
                      </li>

                      <li>
                        <a class="hiprint-toolbar-item">
                          <input
                            type="text"
                            id="customWidth"
                            style="width: 50px; height: 19px; border: 0px"
                            placeholder="宽/mm"
                          />
                        </a>
                      </li>
                      <li>
                        <a class="hiprint-toolbar-item">
                          <input
                            type="text"
                            id="customHeight"
                            style="width: 50px; height: 19px; border: 0px"
                            placeholder="高/mm"
                          />
                        </a>
                      </li>

                      <li>
                        <a
                          class="hiprint-toolbar-item"
                          onclick="setPaper($('#customWidth').val(),$('#customHeight').val())"
                        >
                          自定义
                        </a>
                      </li>
                      <li>
                        <a class="hiprint-toolbar-item" onclick="rotatePaper()">
                          旋转
                        </a>
                      </li>
                      <li>
                        <a
                          class="hiprint-toolbar-item"
                          onclick="clearTemplate()"
                        >
                          清空
                        </a>
                      </li>

                      <li>
                        <a
                          class="btn hiprint-toolbar-item"
                          style="
                            color: #fff;
                            background-color: #d9534f;
                            border-color: #d43f3a;
                          "
                          id="m_preview"
                        >
                          快速预览
                        </a>
                      </li>
                      <li>
                        <a
                          id="A4_directPrint"
                          class="btn hiprint-toolbar-item"
                          style="
                            color: #fff;
                            background-color: #d9534f;
                            border-color: #d43f3a;
                          "
                        >
                          打印
                        </a>
                      </li>

                      <li>
                        <a
                          id="printSave"
                          class="btn hiprint-toolbar-item"
                          style="
                            color: #fff;
                            background-color: #d9534f;
                            border-color: #d43f3a;
                          "
                        >
                          保存
                        </a>
                      </li>
                    </ul>
                    <div style="clear: both"></div>
                  </div>
                  <div
                    id="hiprint-printTemplate"
                    class="hiprint-printTemplate"
                    style="margin-top: 20px"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </content>
      <sider class="hinnn-layout-sider">
        <div class="container height-100-per" style="width: 250px">
          <div class="row">
            <div class="col-sm-12">
              <div
                id="PrintElementOptionSetting"
                style="margin-top: 10px"
              ></div>
            </div>
          </div>
        </div>
      </sider>
    </layout>
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog modal-lg" role="document" style="width: 825px">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">打印预览</h4>
          </div>

          <div class="modal-body">
            <button type="button" class="btn btn-danger" id="A4_printByHtml">
              打印
            </button>
            <div class="prevViewDiv"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>

    <!--[[ 测试专用  单独使用无需引入  -->
    <script src="custom_test/custom-etype-provider.js"></script>
    <script src="custom_test/custom-print-json.js"></script>
    <script src="custom_test/print-data.js"></script>
    <!--测试专用  单独使用无需引入 ]]  -->
    <!--单独使用无需引入  -->
    <script src="hiprint.config.js"></script>
    <script src="polyfill.min.js"></script>
    <script src="plugins/jquery.minicolors.min.js"></script>
    <script src="plugins/JsBarcode.all.min.js"></script>
    <script src="plugins/qrcode.js"></script>
    <script src="hiprint.bundle.js"></script>
    <script src="plugins/jquery.hiwprint.js"></script>

    <script>
      var hiprintTemplate,
        opt = ''
      $(document).ready(function () {
        //初始化打印插件
        hiprint.init({
          providers: [new customElementTypeProvider()],
        })
        //设置左侧拖拽事件
        hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))
        $('#m_preview').click(function () {
          $('#myModal .modal-body .prevViewDiv').html(
            hiprintTemplate.getHtml(printData)
          )
          $('#myModal').modal('show')
        })
        $('#A4_directPrint').click(function () {
          hiprintTemplate.print(printData)
        })
        $('#A4_printByHtml').click(function () {
          hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'))
        })
        $('#printSave').click(function () {
          const jsonStr = hiprintTemplate.getJson()
          jsonStr['type'] = 'hiprint'
          window.parent.postMessage(jsonStr, '*')
        })
        console.log('window.parent', window.parent)
        window.parent.postMessage({ type: 'onLoad' }, '*')
      })
      const initHiPrint = (templateJson) => {
        hiprintTemplate = new hiprint.PrintTemplate({
          template: templateJson,
          settingContainer: '#PrintElementOptionSetting',
        })
        //打印设计
        hiprintTemplate.design('#hiprint-printTemplate')
      }

      const delayedInit = (templateJson) => {
        if (document.querySelector('#PrintElementOptionSetting')) {
          initHiPrint(templateJson)
        } else {
          setTimeout(() => {
            delayedInit(templateJson)
          }, 100)
        }
      }

      //调整纸张
      var setPaper = function (paperTypeOrWidth, height) {
        hiprintTemplate.setPaper(paperTypeOrWidth, height)
      }
      //旋转
      var rotatePaper = function () {
        hiprintTemplate.rotatePaper()
      }
      var clearTemplate = function () {
        hiprintTemplate.clear()
      }
      window.addEventListener(
        'message',
        function (e) {
          let json = e.data
          if (json.type !== 'hiprint') {
            return
          }
          opt = 'edit'
          if (json.opt === 'add') {
            opt = 'add'
            json = {
              panels: [
                {
                  index: 0,
                  height: 297,
                  width: 210,
                  paperHeader: 0,
                  paperFooter: 0,
                  printElements: [],
                  paperNumberLeft: 0,
                  paperNumberTop: 0,
                  paperNumberDisabled: true,
                },
              ],
            }
          }
          delete json.type
          delete json.opt
          setTimeout(() => {
            delayedInit(json)
          }, 100)
        },
        false
      )
    </script>
  </body>
</html>
